import React, {useEffect, useState} from 'react'
import {Store} from 'rc-field-form/lib/interface';
import {useRequest} from '@umijs/hooks';
import {Button, Drawer, Form, Input, message, Select} from 'antd'
import {fetchRequest} from '@/utils/Request';
import {url} from '@/utils/url';

const {Option} = Select;


function AddParticulars(props: any) {

    //  解构 props 数据和方法
    const {addVisible, setaddVisible, isSearch, tableTitle, addSuccess} = props

    //  form 表单
    const [form] = Form.useForm();

    //  存放设备类型数据的数组
    const [devTypeList, setDevTypeList] = useState<any>([]);

    //  设备类型循环下拉框数据
    const typeOptions = devTypeList.map((d: any, index: number) => <Option value={d.value}
                                                                           key={index}>{d.title}</Option>);

    //  存放视频设备类型数据数组
    const [videoTypeList, setVideoTypeList] = useState<any>([]);

    //  视频设备类型循环下拉框数据
    const videoTypeOptions = videoTypeList.map((d: any, index: number) => <Option value={d.value}
                                                                                  key={index}>{d.title}</Option>);

    //  存放校区名称数据数组
    const [collegeAreaList, setCollegeAreaList] = useState<any[]>([]);

    //  校区名称循环下拉框数据
    const collegeAreaOption = collegeAreaList.map((d: any, index: number) => <Option value={d.collegeAreaId}
                                                                                     key={index}>{d.collegeAndArea}</Option>);


    //  获取视频设备设备类型下拉数据
    async function getDevType(params: any) {
        try {
            const json = await fetchRequest(url.GET_DEVTYPE, params);
            if (json.success) {
                setVideoTypeList(json.data[0].children)
            } else {
                message.destroy();
                message.error(json.error)
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message)
        }
    }

    // 发送设备类型请求
    const getTableData = useRequest(getDevType, {
        manual: true,
        loadingDelay: 200
    })

    useEffect(() => {
        getSchoolOrganizationRequest();
        if (isSearch && isSearch === "videoTerminal") {
            getTableData.run({"devType": 2})
        } else getTableData.run({"devType": 3})
    }, [])

    // 获取设备类型
    async function getDevTypeRequest() {

        try {
            const json = await fetchRequest(url.GET_DEV_TYPE, "");
            if (json.success) {
                // console.log(json.data.children);
                setDevTypeList(json.data[0].children)
            } else {
                message.destroy();
                message.error(json.error)
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message)
        }
    }

    //  获取校区名称
    async function getSchoolOrganizationRequest() {
        try {
            const json = await fetchRequest(url.ALL_COLLEGE_ADN_AREA, {collegeAndAreName: ''});
            if (json.success) {
                message.destroy();
                setCollegeAreaList(json.data);
            } else {
                message.destroy();
                message.error(json.error);
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message);
        }
    }

    //  设置表单宽度
    const layout = {
        labelCol: {span: 5},
        wrapperCol: {span: 14},
    };

    //  设置确定按钮样式
    const tailLayout = {
        wrapperCol: {offset: 5, span: 14},
    };

    //新增视频设备的学校的信息
    async function addInfoRequest(params: Store) {
        try {
            const json = await fetchRequest(url.GET_ADDVIDOLIST, params);
            if (json.success) {
                form.resetFields();
                addSuccess();
            } else {
                message.destroy();
                form.resetFields();
                message.error(json.error);
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message);
        }
    }

    //新增扫码设备的学校的信息
    async function addSvanTerminal(params: Store) {
        try {
            const json = await fetchRequest(url.GET_ADDHEALTH, params);
            if (json.success) {
                form.resetFields();
                addSuccess();
            } else {
                message.destroy();
                form.resetFields();
                message.error(json.error);
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message);
        }
    }

    // 发送扫码设备请求
    const addSvan = useRequest(addSvanTerminal, {
        manual: true,

    })

    //  发送视频设备请求
    const addInfo = useRequest(addInfoRequest, {
        manual: true,

    })


    //点击搜索按钮修改表格参数
    async function handleFinish(values: any) {
        const params = {
            ...values
        };
        if (isSearch === 'videoTerminal') {
            if (params.attrIDs) {
                params.attrIDs = []
                params.attrIDs.push(values.attrIDs)
            }

            await addInfo.run(params)
        } else {
            await addSvan.run(params)
        }

        console.log(isSearch, addInfo, addSvan)

    }

    const loading = isSearch === 'videoTerminal' ? addInfo.loading : addSvan.loading
    // 视频设备
    const videoTerminal = (
        <Form {...layout} initialValues={{
            collegeAreaId: ''
        }} form={form} onFinish={handleFinish}>
            <Form.Item name="collegeAreaId" label="校区名称" rules={[{required: true, message: "必须要选择校区名称!"}]}>
                <Select placeholder="请选择校区名称" showSearch filterOption={(input, option: any) =>
                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                } allowClear>
                    {collegeAreaOption}
                </Select>
            </Form.Item>
            <Form.Item name="deviceModelId" label="设备类型" rules={[{required: true, message: "必须要选择设备类型!"}]}>
                <Select placeholder="请选择设备类型">
                    {videoTypeOptions}
                </Select>
            </Form.Item>

            <Form.Item name="hostId" label="终端序列" rules={[{required: true, message: "必须要填写终端序列!"}]}>
                <Input placeholder="请填写终端序列"/>
            </Form.Item>
            <Form.Item name="deviceName" label="设备名称" rules={[{required: true, message: "必须要填写设备名称!"}]}>
                <Input placeholder="请填写设备名称"/>
            </Form.Item>
            <Form.Item label="进出属性" name="attrIDs">
                <Select allowClear className="search-form-item" placeholder="请选择进出属性">
                    <Select.Option value={1}>出口</Select.Option>
                    <Select.Option value={2}>入口</Select.Option>
                </Select>
            </Form.Item>
            <Form.Item className="form-control-item" name="devMapLocation" label="详细位置"
                       rules={[{required: true, message: "必须要填写详细位置!"}]}>
                <Input placeholder="请填写详细位置"/>
            </Form.Item>
            <Form.Item className="form-control-item" name="latitude" label="纬度">
                <Input placeholder="请填写纬度"/>
            </Form.Item>
            <Form.Item className="form-control-item" name="longitude" label="经度">
                <Input placeholder="请填写经度"/>
            </Form.Item>
            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit" loading={loading}>提交</Button>
            </Form.Item>
        </Form>
    )

    // 扫码设备
    const scanTerminal = (
        <Form {...layout} initialValues={{
            collegeName: ''
        }} form={form} onFinish={handleFinish}>
            <Form.Item name="collegeAreaId" label="校区名称" rules={[{required: true, message: "必须要选择校区名称!"}]}>
                <Select placeholder="请选择校区名称" allowClear
                        showSearch

                        filterOption={(input: any, option: any) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                >
                    {collegeAreaOption}
                </Select>
            </Form.Item>

            <Form.Item name="devModelId" label="设备类型" rules={[{required: true, message: "必须要选择设备类型!"}]}>
                <Select placeholder="请选择设备类型">
                    {videoTypeOptions}
                </Select>
            </Form.Item>
            <Form.Item name="hostId" label="终端序列号" rules={[{required: true, message: "必须要填写终端序列号!"}]}>
                <Input placeholder="请填写终端序列号"/>
            </Form.Item>
            <Form.Item name="deviceCode" label="设备Mac编号" rules={[{required: true, message: "必须要填写设备Mac编号!"}]}>
                <Input placeholder="请填写设备Mac编号"/>
            </Form.Item>
            <Form.Item name="address" label="详细位置" rules={[{required: true, message: "必须要填写详细位置!"}]}>
                <Input placeholder="请填写详细位置"/>
            </Form.Item>
            <Form.Item className="form-control-item" name="latitude" label="纬度">
                <Input placeholder="请填写纬度"/>
            </Form.Item>
            <Form.Item className="form-control-item" name="longitude" label="经度">
                <Input placeholder="请填写经度"/>
            </Form.Item>
            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit" loading={loading}>提交</Button>
            </Form.Item>
        </Form>

    )
    return (
        <Drawer destroyOnClose title={tableTitle} width="40%" visible={addVisible} onClose={() => setaddVisible(false)}>
            {isSearch === 'videoTerminal' ? videoTerminal : scanTerminal}
        </Drawer>
    )
}

export default AddParticulars
